<template>
	<view
		class="page"
		:style="{
			'--color': color,
			'--bgcolor': pageSet.bgColor,
			'--tit-size': pageSet.titSize * 2 + 'rpx',
			'--tit-color': pageSet.titColor,
			'--tit-weight': pageSet.titWeight,
			'--info-size': pageSet.infoSize * 2 + 'rpx',
			'--info-color': pageSet.infoColor,
			'--info-weight': pageSet.infoWeight,
		}">
		<status-bar :title="tabTitle" hideBg back="0" :goHome="fromShare"></status-bar>

		<backTop v-if="toTop"></backTop>

		<view v-if="pageData.length">
			<block v-for="(item, index) in pageData" :key="index">
				<Bannel
					v-if="item.type == 'banner'"
					:pageData="item.compCont"
					:isImmerse="1"></Bannel>
				<adv v-if="item.type == 'advertisement'" :pageData="item.compCont"></adv>
				<hotZone v-if="item.type == 'hotZone'" :pageData="item.compCont"></hotZone>
				<VideoList v-if="item.type == 'video'" :pageData="item.compCont"></VideoList>
				<divider v-if="item.type == 'divider'" :pageData="item.compCont"></divider>
			</block>
		</view>

		<view
			class="classNav"
			:style="{ top: totalHeight + 'px' }"
			v-if="columnData && columnData.length > 1">
			<u-tabs
				:list="columnData"
				keyName="website_list_title"
				lineColor="#9f0000"
				lineWidth="26"
				:current="checkId"
				@click="checkList"
				:inactiveStyle="{ color: '#666', fontSize: '26rpx', transform: 'scale(1)' }"
				:activeStyle="{
					color: '#9f0000',
					fontSize: '26rpx',
					fontWeight: 'bold',
					transform: 'scale(1.05)',
				}"></u-tabs>
		</view>

		<view v-if="artList.length">
			<view class="p-left20 p-right20" v-if="!pageSet.style">
				<view v-for="(item, index) in artList" :key="index" @click="$pop.artDetails(item)">
					<view
						class="padding30 bot bgwhite m-top20 bor_radius_10"
						v-if="!item.website_article_img && !item.website_article_atlas">
						<text class="tit ellipsis">{{ item.website_article_title }}</text>
					</view>

					<view
						class="padding30 bot bgwhite m-top20 bor_radius_10"
						v-if="item.website_article_img && !item.website_article_atlas">
						<view class="d-flex j-sb">
							<view style="width: 430rpx">
								<view class="tit ellipsis m-bot20">{{
									item.website_article_title
								}}</view>
								<view class="info ellipsis_2">{{ item.website_article_info }}</view>
							</view>
							<image
								:src="$imgUrls(item.website_article_img)"
								mode="aspectFill"
								class="list_one_img bor_radius_10"></image>
						</view>
					</view>

					<view
						class="padding30 bot bgwhite m-top20 bor_radius_10"
						v-if="item.website_article_atlas.length == 1">
						<text class="tit ellipsis">{{ item.website_article_title }}</text>
						<image
							:src="$imgUrls(item.website_article_atlas[0])"
							mode="aspectFill"
							class="list_MAX_img m-top30 m-bot40"></image>
					</view>

					<view
						class="padding30 bot m-top20 bor_radius_10"
						v-if="item.website_article_atlas.length > 1">
						<text class="tit ellipsis">{{ item.website_article_title }}</text>
						<scroll-view scroll-x="true" class="scroll-row m-top20 m-bot40">
							<image
								:src="$imgUrls(subItem)"
								mode="aspectFill"
								class="list_more_img"
								v-for="(subItem, subIndex) in item.website_article_atlas"
								:key="subIndex"></image>
						</scroll-view>
					</view>
				</view>
			</view>

			<view class="padding20 d-flex f-wrap j-sb" v-if="pageSet.style == 1">
				<view
					class="photo m-bot40"
					v-for="(item, index) in artList"
					:key="index"
					@click="$pop.artDetails(item)">
					<image
						:src="$imgUrls(item.website_article_img)"
						mode="aspectFill"
						v-if="item.website_article_img"></image>
					<image
						:src="$imgUrls(item.website_article_atlas[0])"
						mode="aspectFill"
						v-else-if="item.website_article_atlas"></image>
					<image
						:src="staticUrl + '/images/imageLoading.png'"
						mode="aspectFill"
						v-else></image>
					<view class="padding10">
						<view class="tit m-bot10 ellipsis">{{ item.website_article_title }}</view>
						<view class="info ellipsis">{{ item.website_article_info }}</view>
					</view>
				</view>
			</view>

			<view class="padding30" v-if="pageSet.style == 2">
				<view
					class="card padding30 m-bot30 bor_radius_20 bgwhite"
					v-for="(item, index) in artList"
					:key="index"
					@click="$pop.artDetails(item)">
					<view class="d-flex a-center m-bot30 color_77">
						<view class="m-right40">{{ item.website_article_addtime }}</view>
						<view class="flex-1">{{ item.website_article_views }}阅读</view>
						<view>
							<text
								class="iconfont icon-guanzhu3 size36 thmeColor"
								v-if="item.myZan == 1"
								@click.stop="artZan(item)"></text>
							<text
								class="iconfont icon-guanzhu size36"
								v-if="item.myZan == 0"
								@click.stop="artZan(item)"></text>
							<text class="m-left4">{{ item.allZan }}</text>
						</view>
					</view>
					<view class="tit ellipsis_2 m-bot20">{{ item.website_article_title }}</view>
					<view class="info ellipsis_2 m-bot20" v-if="item.website_article_info">{{
						item.website_article_info
					}}</view>
					<image
						:src="$imgUrls(item.website_article_img)"
						mode="widthFix"
						v-if="item.website_article_img"></image>
					<image
						:src="$imgUrls(item.website_article_atlas[0])"
						mode="widthFix"
						v-else-if="item.website_article_atlas"></image>
				</view>
			</view>
		</view>

		<emptys v-if="nothing"></emptys>

		<tabBar :tab="9"></tabBar>

		<showModel @cancelFunc="showModal = false" goHome="0" v-if="showModal" type="2"></showModel>
	</view>

	<!-- <view>
		<map :latitude="startUp.lat" :longitude="startUp.lng" class="Map"></map>
		<tabBar :tab="9"></tabBar>
	</view> -->
</template>

<script>
	import { mapState } from 'vuex';
	import Bannel from '@/components/home/Bannel.vue';
	import adv from '@/components/home/adv.vue';
	import hotZone from '@/components/home/hotZone.vue';
	import VideoList from '@/components/home/VideoList.vue';
	import divider from '@/components/home/divider.vue';
	export default {
		data() {
			return {
				latitude: '',
				longitude: '',
				staticUrl: this.staticUrl,
				artList: [], // 文章列表
				columnData: '', // 分类列表
				listId: '', // 列表id
				page: 1, // 分页页码
				more: false,
				nothing: false,
				toTop: false,
				checkId: -1, // 当前选中标签的索引
				fromShare: 0,
				pageSet: {
					// 页面设置
					style: 0,
					bgColor: '#fff',
					titSize: 18,
					titWeight: 300,
					titColor: '#000',
					infoSize: 14,
					infoWeight: 300,
					infoColor: '#777',
				},
				pageData: '', // diy组件
				showModal: false,
			};
		},
		components: {
			Bannel,
			adv,
			hotZone,
			VideoList,
			divider,
		},
		onLoad(e) {
			if (e.listId) this.listId = e.listId;
			if (e.fromShare) this.fromShare = e.fromShare;
			this.diyget();
		},
		onShow() {
			this.getColumn();
		},
		methods: {
			diyget() {
				this.$http
					.get({
						url: '/newdiy/api/v1/diy/getDiyPage',
						data: {
							front: 1,
							type: 3,
						},
					})
					.then((res) => {
						if (!res.data) return;
						if (res.data.pageSet) this.pageSet = res.data.pageSet;
						this.pageData = res.data.front_value || [];
					});
			},
			getColumn() {
				this.$http
					.post({
						url: '/zzj_singleSaleApi/getWebsiteList',
					})
					.then((res) => {
						if (res.data && res.data.length) {
							this.columnData = res.data;
							if (!this.listId) {
								this.checkId = 0;
								this.listId = res.data[0].website_list_id;
							}
							let index = this.columnData?.findIndex(
								(item) => item.website_list_id == this.listId
							);
							this.checkId = index == -1 ? 0 : index;
							this.getList();
						} else {
							this.nothing = true;
						}
					});
			},
			checkList({ index, website_list_id }) {
				if (this.checkId != index) {
					this.checkId = index;
					this.artList = [];
					this.page = 1;
					this.$showLoading('加载中');
					this.listId = website_list_id;
					this.getList();
				}
			},
			getList() {
				this.more = false;
				this.nothing = false;
				this.$http
					.post({
						url: '/zzj_singleSaleApi/getArticle',
						data: {
							listId: this.listId,
							pagecount: 10,
							page: this.page,
						},
					})
					.then((res) => {
						this.$hideLoading();
						if (res.data) {
							res.data.forEach((item) => {
								if (item.website_article_atlas) {
									item.website_article_atlas =
										item.website_article_atlas.split(',');
								}
							});
							this.artList =
								this.page == 1 ? res.data : this.artList.concat(res.data);
							if (res.data.length > 9) this.more = true;
							// this.$BarTitle(res.listTitle)
						}

						if (!this.artList || this.artList.length < 1) this.nothing = true;
					});
			},
			artZan(item) {
				if (!this.vid) return (this.showModal = true);
				this.$http
					.post({
						url: '/zzj_singleSaleApi/zanArticle',
						data: {
							article_id: item.website_article_id,
							operation: item.myZan == 1 ? 2 : 1, // 点赞传1，取消传2，zan为1是已点赞
						},
					})
					.then((res) => {
						if (res.code != 100) return this.$Toast(res.msg);
						item.myZan = item.myZan == 1 ? 0 : 1;
						let num = parseInt(item.allZan);
						item.allZan = item.myZan == 1 ? num + 1 : num - 1;
					});
			},
		},
		onReachBottom() {
			if (this.more) {
				this.page += 1;
				this.getList();
			}
		},
		computed: {
			...mapState(['color', 'totalHeight', 'tabTitle', 'vid', 'share', 'startUp']),
		},
		onShareAppMessage() {
			let share = this.share;
			return {
				title: share.title,
				desc: share.desc,
				path: `/pages/index/index?share_v_id=${this.vid}&pageType=5&listId=${this.listId}`,
				imageUrl: share.imageUrl,
			};
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.toTop = true;
			} else {
				this.toTop = false;
			}
		},
	};
</script>
<style lang="scss">
	page {
		background-color: $pages !important;
	}
</style>
<style scoped lang="scss">
	.Map {
		width: 100%;
		height: 1000rpx;
	}
	.page {
		background-color: $pages !important;
	}

	.classNav {
		position: sticky;
		top: 0;
		left: 0;
		right: 0; // 解决右侧遮挡
		z-index: 33;
		background-color: $pages;
	}
	.list_one_img {
		width: 200rpx;
		height: 120rpx;
	}
	.list_MAX_img {
		width: 100%;
		height: 340rpx;
	}
	.list_more_img {
		width: 210rpx;
		height: 180rpx;
		&:not(:last-child) {
			margin-right: 30rpx;
		}
	}
	.photo {
		width: 350rpx;
		image {
			width: 100%;
			height: 524rpx;
			border-radius: 10rpx;
		}
	}
	.card {
		box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
		image {
			width: 436rpx;
		}
	}
	.tit {
		font-size: 30rpx;
		color: var(--tit-color);
	}
	.info {
		font-size: 26rpx;
		color: var(--info-color);
	}
</style>
